<template>
    <div class="container" @click="gallaryClick">
        <div class="wrapper">
        <swiper :options="swiperOption">
    <!-- slides -->
        <swiper-slide v-for="(item,index) in imgs" :key="index">
            <img class="gallary-img" :src="item"/>
        </swiper-slide>
    <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
        </div>
    </div>
</template>

<script>
export default {
  name: "CommonGallary",
  props:{
      imgs:{
          type:Array,
          default(){
              return []
          }
      }
  },
  data(){
      return {
          swiperOption:{
              pagination:'.swiper-pagination',
              paginationType:'fraction',
              observeParents:true,
              observer:true
          }
      }
  },
  methods:{
      gallaryClick(){
          this.$emit('close')
      }
  }
};
</script>

<style lang="stylus" scoped>
.container >>> .swiper-container
    overflow inherit
.container {
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .wrapper {
        width 100%
        height 0
        padding-bottom 100%
    }
    .gallary-img{
        width 100%
    }
    .swiper-pagination{
        color #ffffff
        bottom -1rem
    }
}
</style>